<template>
  <view
    v-if="!useNavbar"
    class="v-navbar"
    :style="{
      '--nav-bar-height': `${navBarHeight}px`,
      '--nav-bar-status-bar-height': `${statusBarHeight}px`,
      '--nav-bar-padding-left': `${menuButtonBounding.right}px`,
      '--nav-bar-padding-right': `${menuButtonWidth}px`,
    }"
  >
    <view :style="{ backgroundColor: backgroundColor }">
      <view v-if="blank" class="status-bar-blank" />
      <view v-if="blank" class="nav-bar-blank" />
    </view>
    <view class="v-navbar-content" :class="{ border: border }">
      <view class="status-bar" />
      <view v-if="!hiddenIcon" class="nav-bar">
        <view class="nav-bar-padding-left" />
        <!-- #ifndef MP-ALIPAY -->
        <view v-if="back" class="back-icon" @click="safeNavigateBack">
          <wd-icon name="arrow-left" size="56rpx" />
        </view>
        <view v-else class="back-icon" />
        <!-- #endif -->
        <!-- #ifdef MP-ALIPAY -->
        <view v-if="home" class="alipay-home" />
        <view v-else class="alipay-back" />
        <!-- #endif -->
        <view class="home-icon" />
        <slot>
          <view class="title" :style="{ color }">
            {{ title }}
          </view>
        </slot>
        <view class="nav-bar-padding-right" />
      </view>
      <view v-else class="nav-bar">
        <slot>
          <view
            class="title"
            :style="{
              color: color,
              textAlign: 'center',
            }"
          >
            {{ title }}
          </view>
        </slot>
      </view>
    </view>
    <view v-if="border" style="margin-bottom: 32rpx" />
  </view>
</template>

<script lang="ts" setup>
import useNavbarLayout from '@/composables/use-navbar-layout';
import useSafeNavigateBack from '@/composables/use-safe-navigate-back';

const { safeNavigateBack } = useSafeNavigateBack();

const props = withDefaults(
  defineProps<{
    // 标题
    title?: string;
    // 是否存在高度占位
    blank?: boolean;
    home?: boolean;
    back?: boolean;
    backIcon?: string;
    color?: string;
    backgroundColor?: string;
    iconColor?: 'white' | 'black';
    border?: boolean;
    native?: boolean;
    hiddenIcon?: boolean;
  }>(),
  {
    title: undefined,
    blank: true,
    home: false,
    back: true,
    backIcon: '@/static/icons/navbar/back.svg',
    color: '#000',
    backgroundColor: 'white',
    iconColor: 'black',
    border: true,
    native: false,
    hiddenIcon: false,
  },
);

const useNavbar = computed(() => {
  let result = props.native;
  // #ifdef MP-WEIXIN
  result = false;
  // #endif
  return result;
});

const { navBarHeight, statusBarHeight, menuButtonBounding } = useNavbarLayout();
const menuButtonWidth = computed(() => {
  return menuButtonBounding.value.width + menuButtonBounding.value.right;
});
onMounted(() => {
  // #ifdef MP-ALIPAY
  // 支付宝小程序返回按钮无法隐藏，颜色按照背景自适应无法定义
  if (!props.home) {
    uni.hideHomeButton();
  }
  watch(
    () => props.iconColor,
    (val) => {
      if (val === 'black') {
        uni.setNavigationBarColor({ backgroundColor: '#ffffff' });
      } else {
        uni.setNavigationBarColor({ backgroundColor: '#000000' });
      }
    },
    { immediate: true },
  );
  // 这里用原生的navbar，动态设置标题
  if (props.native) {
    watch(
      () => props.title,
      (title) => {
        if (title) {
          uni.setNavigationBarTitle({ title });
        }
      },
      { immediate: true },
    );
  }
  // #endif
});
</script>

<style lang="scss" scoped>
.v-navbar {
  .status-bar-blank {
    height: var(--nav-bar-status-bar-height);
  }
  .nav-bar-blank {
    height: var(--nav-bar-height);
  }
  .v-navbar-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    &.border {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    .status-bar {
      height: var(--nav-bar-status-bar-height);
    }
    .nav-bar {
      position: relative;
      height: var(--nav-bar-height);
      display: flex;
      align-items: stretch;
      .nav-bar-padding-left {
        width: var(--nav-bar-padding-left);
        /** #ifndef MP-ALIPAY */
        width: 0;
        /** #endif */
      }
      .nav-bar-padding-right {
        width: calc(var(--nav-bar-padding-right) + 80rpx);
      }
      .back-icon {
        width: 56rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .alipay-back {
        width: 53rpx;
        margin-left: 27rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .alipay-home {
        width: 86rpx;
        margin-left: 79rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .title {
    align-self: center;
    font-size: 36rpx;
    font-weight: 600;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
  }
}
</style>
